<template>
	<div class="float-menu">
		<div class="float-menu-wrap" v-if="datas.show == 1" :class="{ vertical: datas.mode == 1, horizontal: datas.mode == 2 }">
			<div class="float-menu-item" v-for="(item, index) in datas.list" :key="index">
				<div class="sd-image sd-flex">
					<el-image v-if="item.src != ''" :src="STATIC_URL + item.src" fit="cover" class="cover-image" />
				</div>
				<div class="text" :style="{ color: item.title.color }" v-if="datas.isText == 1">{{ item.title.text }}</div>
			</div>
			<!-- <div class="float-menu-item">
				<div class="sd-image sd-flex"></div>
				<div class="text">阿萨德</div>
			</div> -->
			<div class="float-menu-button sd-flex sd-row-center fold">
				<SvgIcon name="ele-Plus" color="#ecf0f1" bgc="#e67e22" class="svg" :size="30"></SvgIcon>
			</div>
		</div>
		<slot name="deles" />
	</div>
</template>

<script setup lang="ts" name="floatbut">
import { ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';

const props = defineProps({
	datas: {},
});
</script>

<style scoped lang="scss">
.float-menu {
	position: absolute;
	height: 100%;
	width: 100%;
	// .floatbut-content-left-top-row {
	// 	height: 50px;
	// 	left: 10px;
	// 	top: 10px;
	// 	position: absolute;
	// 	transition: all 0.5s linear;
	// }

	// .floatbut-content-left-top-column {
	// 	width: 50px;
	// 	left: 10px;
	// 	top: 10px;
	// 	position: absolute;
	// }

	// .operation-left-top-row {
	// 	padding-left: 50px;
	// 	display: flex;
	// 	height: 50px;
	// 	align-items: center;
	// 	transition: all 0.5s linear;
	// }

	// .operation-left-top-column {
	// 	padding-top: 50px;
	// 	display: flex;
	// 	flex-direction: column;
	// 	width: 50px;
	// 	align-items: center;
	// 	transition: all 0.5s linear;
	// }

	// .svg-operation-left-top {
	// 	top: 5px;
	// 	left: 5px;
	// 	position: absolute;
	// 	transition: all 0.5s linear;
	// }

	// .svg-operation-right-top {
	// 	top: 5px;
	// 	right: 5px;
	// 	position: absolute;
	// 	transition: all 0.5s linear;
	// }

	// .floatbut-content-right-top-column {
	// 	width: 50px;
	// 	right: 10px;
	// 	top: 10px;
	// 	position: absolute;
	// }

	// .operation-right-top-column {
	// 	padding-top: 50px;
	// 	display: flex;
	// 	flex-direction: column;
	// 	width: 50px;
	// 	align-items: center;
	// 	transition: all 0.5s linear;
	// }

	// .floatbut-content-right-top-row {
	// 	height: 50px;
	// 	right: 10px;
	// 	top: 10px;
	// 	position: absolute;
	// 	transition: all 0.5s linear;
	// }

	// .operation-right-top-row {
	// 	padding-right: 50px;
	// 	display: flex;
	// 	height: 50px;
	// 	align-items: center;
	// 	transition: all 0.5s linear;
	// }

	// .floatbut-content-right-bottom-row {
	// 	height: 50px;
	// 	right: 10px;
	// 	bottom: 10px;
	// 	position: absolute;
	// }

	// .operation-right-bottom-row {
	// 	padding-right: 50px;
	// 	display: flex;
	// 	height: 50px;
	// 	align-items: center;
	// 	transition: all 0.5s linear;
	// }

	// .svg-operation-right-bottom {
	// 	bottom: 5px;
	// 	right: 5px;
	// 	position: absolute;
	// 	transition: all 0.5s linear;
	// }

	// .floatbut-content-right-bottom-column {
	// 	width: 50px;
	// 	right: 10px;
	// 	bottom: 10px;
	// 	position: absolute;
	// }

	// .operation-right-bottom-column {
	// 	padding-bottom: 50px;
	// 	display: flex;
	// 	flex-direction: column;
	// 	width: 50px;
	// 	align-items: center;
	// 	transition: all 0.5s linear;
	// }

	// .floatbut-content-left-bottom-row {
	// 	height: 50px;
	// 	left: 10px;
	// 	bottom: 10px;
	// 	position: absolute;
	// }

	// .floatbut-content-left-bottom-column {
	// 	width: 50px;
	// 	left: 10px;
	// 	bottom: 10px;
	// 	position: absolute;
	// }

	// .operation-left-bottom-column {
	// 	padding-bottom: 50px;
	// 	display: flex;
	// 	flex-direction: column;
	// 	width: 50px;
	// 	align-items: center;
	// 	transition: all 0.5s linear;
	// }

	// .operation-left-bottom-row {
	// 	padding-left: 50px;
	// 	display: flex;
	// 	height: 50px;
	// 	align-items: center;
	// 	transition: all 0.5s linear;
	// }

	// .svg-operation-left-bottom {
	// 	bottom: 5px;
	// 	left: 5px;
	// 	position: absolute;
	// 	transition: all 0.5s linear;
	// }

	// .btn-turn {
	// 	transform: rotate(135deg);
	// }

	// .svg {
	// 	border-radius: 50%;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	width: 40px;
	// 	height: 40px;
	// }

	// .but-content-column {
	// 	display: flex;
	// 	flex-direction: column;
	// 	width: 50px;
	// 	margin-top: 10px;
	// }

	// .but-content-row {
	// 	display: flex;
	// 	flex-direction: column;
	// 	height: 50px;
	// 	margin-left: 10px;
	// }
}

.float-menu .float-menu-wrap {
	position: absolute;
	right: 30px;
	bottom: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.svg {
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 42px;
}

.float-menu-wrap .float-menu-button {
	width: 42px;
	height: 42px;
	font-size: 20px;
	border-radius: 50%;
	color: #fff;
	transition: all 0.3s linear;
	cursor: pointer;
	transform: rotate(135deg);
	-webkit-transform: rotateZ(135deg);
}

.float-menu-wrap .float-menu-item {
	margin-right: 10px;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.float-menu .float-menu-wrap.vertical .float-menu-item {
	margin-right: 0;
	margin-bottom: 10px;
}

.float-menu .float-menu-wrap.vertical {
	flex-direction: column;
}

.float-menu-item .sd-image {
	width: 26px;
	height: 26px;
	border-radius: 4px;
}
</style>
